import React, { Component } from "react";
import * as d3 from "d3";
import store from "../../redux/store";
export default class TreeChart extends Component {
  componentDidMount() {
    this.createCollapsibleTree();
  }
  componentDidUpdate() {
    this.createCollapsibleTree();
  }

  createCollapsibleTree() {
    const tempdata = store.getState();
    console.log(tempdata, "store中全部数据");
    const data = tempdata.totaldata;
    console.log(data, "在TreeChart中从store中拿到的数据");
    // 创建 SVG 容器
    const svg = d3.select(this.svgRef);

    // 清空 SVG 容器
    svg.selectAll("*").remove();

    // 设置图表尺寸
    const width = 1200;
    const height = 1500;

    // 创建树状布局
    const treeLayout = d3.tree().size([height, width]);

    // 设置节点之间的间距
    // const xSize = 20; // 设置水平间距
    // const ySize = 445; // 设置垂直间距
    // treeLayout.nodeSize([xSize, ySize]);
    // 创建树状图层级结构
    const root = d3.hierarchy(data);

    // 生成树状布局
    treeLayout(root);

    // 绘制连线
    svg
      .selectAll(".link")
      .data(root.links())
      .enter()
      .append("path")
      .attr("class", "link")
      .attr(
        "d",
        d3
          .linkHorizontal()
          .x((d) => d.y)
          .y((d) => d.x)
      );

    // 绘制节点
    const node = svg
      .selectAll(".node")
      .data(root.descendants())
      .enter()
      .append("g")
      .attr("class", "node")
      .attr("transform", (d) => `translate(${d.y},${d.x})`)
      .on("click", (event, d) => {
        if (d.children) {
          // 如果节点已展开，将其收缩
          d.children = null;
        } else {
          // 如果节点已收缩，将其展开
          d.children = d._children;
        }
        this.createCollapsibleTree(); // 重新绘制树状图
      });

    // 绘制节点圆圈
    node.append("circle").attr("r", 4);

    // 绘制节点名称
    node
      .append("text")
      .attr("x", 10)
      .attr("dy", ".32em")
      .text((d) => `${d.data.name} ${d.data.version}`);
  }
  render() {
    return (
      <div className="treeChart_container">
        <svg
          ref={(ref) => (this.svgRef = ref)}
          width="1500"
          height="1500"
        ></svg>
      </div>
    );
  }
}
